import React from "react";
import { Input, Button } from "antd";
import { service } from "../service/service";
import { confSrore } from "../service/store";

class State {
  public sourceUrl: string
  public formater: string
}

export default class Right extends React.Component {
  public state = new State()

  private name: string

  public componentDidMount() {
    confSrore.subscribe(name => {
      this.name = name
      const conf = service.getItemConf(name) || {}
      this.setState({ sourceUrl: conf.sourceUrl, formater: conf.formater })
    })
  }

  public render() {
    return <div style={{ top: 0, right: 0, position: "absolute" }}>
      <div>数据源</div>
      <Input value={this.state.sourceUrl} onChange={e => {
        const sourceUrl = e.target.value
        this.setState({ sourceUrl })
      }} />
      <div>数据格式化</div>
      <Input value={this.state.formater} onChange={e => {
        const formater = e.target.value
        this.setState({ formater })
      }} />
      <Button onClick={() => {
        confSrore.next(this.name)
        service.setItemConf(this.name, this.state)
      }}>保存</Button>
    </div>
  }
}